<html>
    <head>
        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <style type="text/css">
            #daohang{height:60px;background-color: cornflowerblue;padding-top: 10px;padding-left:20px;}
            #square{float:left;background-color:white;width: 30px;height:40px;}
            #form1{float: left;width:200px;margin-left: 1350px;}
            #form1 span{position: absolute;top:20px;}
            #login{float:left;width:100px;margin-left:10px;}
            #login span,#login a{color: white;}
            #self{float:left;width:250px;background-color: black;padding-left:50px;padding-top: 20px;}
            #self div #circle{float:left;background-color: white;width: 50px;height:50px;}
            #self div #name{float:left;padding:15px;color: white;margin-right: 50px;}
            #sc-fan{margin-top: 20px;}
            #shoucang{float:left;border-right-style: solid;border-right-width:thin;color:gray;
            padding-right: 30px;}
            #fensi{float:left;color:gray;padding-left: 30px;}
            #baobiao{height: 200px;}
            #fugai{position:absolute;margin-top: -200px;margin-left:-50px;height:200px;width:250px;opacity:0.3; filter: alpha(opacity=30);background-color: gray; }
            ul{list-style-type: none;}
            #self div #h4{color: white;}
             #self div li{padding-top: 10px;}
            #self div .doc2{color: white;}
            #self div #nodoc2{color: gray;}
            #self #other-list h4{margin-top:20px;}

            #right{float:left;width: 1200px;}
            
            #main{position:relative;padding-left:50px;padding-right:50px;padding-top:10px;padding-bottom:10px;width: 1200px;background-color: gray;}
            #main #main1{border-style: solid;border-width:thin;background-color: white;margin-bottom: 10px;}
            #main1 #s-item{float: left;padding:10px;margin-right:20px;}
                #buy{float: left;padding:10px;margin-right:20px;}
                #detail{float: left;padding:10px;}
                #detail div #dt-time{float:left;padding-left: 10px;padding-right:10px;}
                #detail div #dt-days{float:left;padding-left: 10px;padding-right:10px;}
                #detail div #dt-per{float:left;padding-left: 10px;padding-right:10px;}
                #detail div #dt-down{float:left;padding-left: 10px;padding-right:10px;}
            #main-2{margin-bottom: 20px;}
                #bt1{margin-top: 20px;margin-left:50px;background-color:blue;}
                #bt-left,#bt-right{float:left;height: 80px;width: 40px;border-top-style: solid;border-top-width:thin;border-left-style: solid;border-left-width:thin;}  
                #bt-right{margin-left:4px;}
                .bt-div{background-color:white;display:table;float:left;height: 80px;width:130px;border-top-style: solid;border-top-width:thin;border-left-style: solid;border-left-width:thin;
                margin-left:4px;margin-right: 4px;text-align: center;} 
                .inner-div{display: table-cell;vertical-align: middle;}   
                #bt-1{border-top-color: blue;border-top-width:normal;}
                #bt-search{width:180px;}
            #main3 .deal{float:left; width:250px;height:80px;padding-top: 10px;padding-left:10px;border-style: solid;border-width:thin;
                background-color:white;}
            #main3 .statistic-p{float:left;margin-right: 60px;padding:10px;}
            #main3 .color-3{float:left;height: 60px;width:80px;}
            #main3 #green{border-left-color: green;border-left-style:solid;border-left-width: thick;margin-right: 30px;}
             #main3 #green #green1{background-color: green;}
              #main3 #blue{border-left-color: blue;border-left-style:solid;border-left-width: thick;margin-right: 30px;}
             #main3 #blue #blue1{background-color: blue;}
             #main3 #red{border-left-color: red;border-left-style:solid;border-left-width: thick;margin-right: 30px;}
             #main3 #red #red1{background-color: red;}
             #main3 #yellow{border-left-color: yellow;border-left-style:solid;border-left-width: thick;}
             #main3 #yellow #yellow1{background-color: yellow;}

             #main4{float:left;width:700px;background-color: white;margin-top: 20px;}
             .bottom-4{padding-top:10px;padding-left:20px;padding-right: 20px;padding-bottom: 20px;}
                #main4 #table-4{padding:20px;border-left-style: solid;border-left-width: thin;border-right-style: solid;border-right-width: thin;
                border-bottom-style: solid;border-bottom-width: thin;border-color: lightgray;}
                #main4 .program-5{background-color: lightgray;color: black;}
             #main5{float:left;margin-top:20px;margin-left:10px;padding-bottom:30px;border-style: solid;border-width:thin;width: 390px;background-color:white;}
             #main5 #main5-2{padding-top:10px;padding-left:35px;padding-right: 35px;}
             #main5-2 input{border-style:none;}
             #main5-t{width:320px;border-bottom-style:solid;border-bottom-width: thin;border-bottom-color:lightgray;height: 60px;padding-left:10px;}

             #main5-p{float:left;width:118px;border-bottom-style:solid;border-bottom-width: thin;border-bottom-color:lightgray;height: 60px;padding-left:10px;}
             #main5-f{float:left;width:225px;border-bottom-style:solid;border-bottom-width: thin;border-bottom-color:lightgray;
             border-left-style:solid;border-left-width:thin;border-left-color:lightgray;margin-right: -25px;height: 60px;padding-left:10px;}

             #main5-d{float:left;width:320px;height: 130px;margin-bottom: 10px;
             border-bottom-style:solid;border-bottom-width: thin;border-bottom-color:lightgray;padding-left:10px;}
             #main5-search label{float: left;}
             #main5-search button{float: right;background-color: blue;}
            #main6{float:left;margin-top:10px;border-style: solid;border-width:thin;width: 390px;background-color:white;}
            #cal2{margin-bottom: 10px;}
            #cal2 div{width: 80px;float:left;margin-right: 5px;}
            #cal2 div button{width:100%;}
            #cal3{border-top-style: solid;border-top-width:thin;border-top-color:green;border-bottom-style: solid;border-bottom-width:thin;
            border-bottom-color: lightgray;width: 350px;padding:10px;}
            #cal3 ul{padding:0;}
            #cal3 li{float:left;width:47px;text-align: center;}
            #cal4{width: 350px;padding:10px;}
            #cal4 div ul{padding:0;}
            #cal4 div ul li{float: left;width:47px;text-align: center;}
            #first-day{margin-left: 188px;}
            .special{border-style: solid;border-width: thin;border-color:yellow;}
            .zhoumou{color: red;}
            #main7{float:left;width:700px;margin-left:10px;border-style: solid;border-width:thin;border-color: lightgray;
            background-color: white;margin-top: 10px;}
            .top-4{background-color: lightgray;height: 30px;padding-top:5px;padding-left:20px;padding-right: 20px;}
            .main7-k{width: 60px;}
            .main7-n{float: left;width:70px;}
            .main7-c{float: left;width:400px;}
            #main7 td{text-align: center;vertical-align: center;}
            #main7 td div{margin:0;}
            .clear{clear: both;}

        </style>
    </head>
    <body>
        <div id="daohang">
            <div id="square">
            </div>
            <form class="form">
                <div class="form-group" id="form1">
                    <input type="text" class="form-control" placeholder="">
                    <span class="glyphicon glyphicon-search"></span>
                </div>
            </form>
             <div id="login">
                 <a href=""><span class="glyphicon glyphicon-user"></span>log in</a>
            </div>
            <div class="clear"></div>
        </div>
        <div id="self">
            <div>
                <div id="circle"></div>
                <div id="name">ABC123</div>
                <div class="clear"></div>
            </div>
            <div id="sc-fan">
                <div id="shoucang">
                    <div id="num1">110</div>
                    <div id="sc">shou</div>
                </div>
                 <div id="fensi">
                    <div id="num2">313</div>
                    <div id="fan">fans</div>
                </div>
                 <div class="clear"></div>
            </div>
            <div id="baobiao">
                <h4><span class="glyphicon glyphicon-th-list" id="h4"></span> self baobiao</h4>
                <ul>
                    <li><span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-list-alt"></span> doc 1</li>
                    <li class="doc2"><span class="glyphicon glyphicon-chevron-down"></span> <span class="glyphicon glyphicon-list-alt"></span> doc 2
                        <ul>
                            <li class="doc2"><span class="glyphicon glyphicon-list-alt"></span> file1</li>
                            <li id="nodoc2"><span class="glyphicon glyphicon-list-alt"></span> file2</li>
                        </ul>
                    <li><span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-list-alt"></span> doc3</li>
                </ul>
            </div>
            <div id="fugai">
            </div>
            <div  id="other-list">
                <h4 class="glyphicon glyphicon-star">  gerenshoucang</h4>
                <h4 class="glyphicon glyphicon-saved">  my share</h4>
                <h4 class="glyphicon glyphicon-star">  paragraph</h4>
                <h4 class="glyphicon glyphicon-star">  growing records</h4>
                <h4 class="glyphicon glyphicon-saved">  user information</h4>
            </div>
            <div class="clear"></div>
        </div>
        <div id="right">
              <div id="daohang1">
                  <ul class="breadcrumb">
                      <li><a href="">c zhan</a></li>
                      <li><a href="">self baobiao</a></li>
                      <li><a href="">file 1</a></li>
                      <li class="active">document 1</li>
                  </ul>
              </div>
              <div id="main">
                  <div id="main1">
                    <div id="s-item">  
                        <form>chaxun
                            <select name="number">
                                <option value="1">number1</option>
                            </select>
                        </form>
                    </div> 
                    <div id="buy">
                        <form>buyer
                            <select name="buyer">
                                <option value="xiaoA">xiaoA</option>
                            </select>
                        </form>
                        <form>seller
                            <select name="seller">
                                <option value="seller">seller</option>
                            </select>
                        </form>
                    </div>  
                     <div id="detail">
                         <div id="dt-1">
                            <form id="dt-time">time
                                <input type="text" name="time" />
                            </form>
                            <form id="dt-days">timer
                                <select name="days">
                                    <option value="8">8 days</option>
                                </select>
                            </form>
                         </div>
                         <div id="dt-2">
                            <form id="dt-per">person 
                                <select name="number">
                                    <option value="10">10 ren</option>
                                </select>
                            </form>
                            <form id="dt-down">deal down
                                <select name="down">
                                    <option value="0">10xiang</option>
                                </select>
                            </form>
                        </div>
                    </div>
                    <div>
                        <button id="bt1"type="button">search</button>     
                    </div>  
                    <div class="clear"> </div>      
                </div>
                <div id="main-2">
                    <button id="bt-left" type="button"><span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                    <div id="bt-1" class="bt-div">
                        <div class="inner-div">
                            <span>10:00</span><span> am</span>
                            <div>$1200</div>
                        </div>
                    </div>
                    <div class="bt-div">
                        <div class="inner-div">
                            <span>11:00</span><span> am</span>
                            <div>$1300</div>
                        </div>
                    </div>
                    <div class="bt-div">
                        <div class="inner-div">
                            <span>12:00</span><span> am</span>
                            <div>$1200</div>
                        </div>
                    </div>
                    <div class="bt-div">
                        <div class="inner-div">
                            <span>01:00</span><span> am</span>
                            <div>$1200</div>
                        </div>
                    </div>
                    <div class="bt-div">
                        <div class="inner-div">
                            <span>02:00</span><span> am</span>
                            <div>$1200</div>
                        </div>
                    </div>
                    <div class="bt-div">
                        <div class="inner-div">
                            <span>03:00</span><span> am</span>
                            <div>$1200</div>
                        </div>
                    </div>
                    <button id="bt-right" type="button"><span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                    <div class="bt-div" id="bt-search">
                        <div class="inner-div">
                            <span class="glyphicon glyphicon-calendar"></span>
                            <span>searching</span>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="main3">
                    <h4>2016nian4yuefentongji</h4>
                    <div class="deal" id="green">
                        <div class="statistic-p">
                            <p>133311</p>
                            <p>deal</p>
                        </div>
                        <div id="green1" class="color-3">
                        </div>
                    </div>
                    <div class="deal" id="blue">
                        <div class="statistic-p">
                            <p>133311</p>
                            <p>deal</p>
                        </div>
                        <div id="blue1" class="color-3">
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="deal" id="red">
                        <div class="statistic-p">
                            <p>133311</p>
                            <p>deal</p>
                        </div>
                        <div id="red1" class="color-3">
                        </div>
                    </div>
                    <div class="deal" id="yellow">
                        <div class="statistic-p">
                            <p>133311</p>
                            <p>deal</p>
                        </div>
                        <div id="yellow1" class="color-3">
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="main4">
                    <div class="top-4">the first program
                    </div>
                    <div class="bottom-4">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#table-4" data-toggle="tab">program1</a>
                            </li>
                            <li><a href="" data-toggle="tab" class="program-5">program2</a>
                            </li>
                            <li><a href="" data-toggle="tab" class="program-5">program3</a>
                            </li>
                            <li><a href="" data-toggle="tab" class="program-5">program4</a>
                            </li>
                            <li><a href="" data-toggle="tab" class="program-5">program5</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="table-4">
                                <div>
                                    <table class="table table-bordered" id="main4-table">
                                        <tr>
                                            <td class="active">item</td>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                        </tr>
                                        <tr>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                        </tr>
                                        <tr>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                        </tr>
                                        <tr>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                        </tr>
                                        <tr>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                            <td>item</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                         </div>
                    </div>
                </div>
                <div id="main5">
                    <div class="top-4">the first program
                    </div>
                    <div id="main5-2">
                        <div id="main5-t"><input type="text" placeholder="title">
                        </div>
                        <div id="main5-p"><input type="text" placeholder="price">
                        </div>
                        <div id="main5-f"><input type="text" placeholder="fuzeren">
                        </div>
                        <div id="main5-d"><input type="text" placeholder="details">
                        </div>
                        <div id="main5-search"><label><input type="checkbox">please dagou</label>
                            <button type="submit">search</button>
                        </div>
                    </div>
                </div>
                <div id="main6">
                    <div class="top-4">calender
                    </div>
                    <div class="bottom-4">
                        <div id="cal2">
                            <div>                            
                                <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                    2015
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>2015</li>
                                <ul>                            
                            </div>
                            <div>                            
                                <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                    5
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>6</li>
                                <ul>                            
                            </div>
                            <div>                            
                                <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                    23
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>24</li>
                                <ul>                            
                            </div>                        
                            <button id="return" type="button">return today</button>
                        </div>
                        <div id="cal3">
                            <ul>
                                <li>yi</li>
                                <li>yi</li>
                                <li>yi</li>
                                <li>yi</li>
                                <li>yi</li>
                                <li>yi</li>
                                <li>yi</li>
                            </ul>
                            <div class="clear"></div>   
                        </div>
                        <div id="cal4">
                            <div>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li>
                                    </li>
                                    <li id="first-day">
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                </ul>
                                <div class="clear"></div> 
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li class="special">
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                </ul>
                                <div class="clear"></div> 
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li class="special">
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                </ul>
                                <div class="clear"></div> 
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li class="special">
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                </ul>
                                <div class="clear"></div> 
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>2</p>
                                        <p>five</p>
                                    </li>
                                    <li>
                                        <p>1</p>
                                        <p>fool</p>
                                    </li>
                                    <li>
                                        <p class="zhoumou">2</p>
                                        <p>five</p>
                                    </li>
                                     <li>
                                    </li>
                                </ul>
                                <div class="clear"></div>   
                            </div>
                        </div>
                    </div>
                </div>
                <div id="main7">
                     <div class="top-4">cars pinpaibang
                    </div>
                    <div class="bottom-4">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="duan main7-k">paiming</th>
                                    <th>pinpai</th>
                                    <th>search number</th>
                                </tr>
                            </thead>
                            <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                            <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                            <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                            <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                             <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                             <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                             <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                             <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                            <tr>
                                <td class="main7-k">1</td>
                                <td class="main7-k">dazhong</td>
                                <td><div class="main7-n">234555</div>                                 
                                    <div class="progress main7-c">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                        aria-valuemax="100" style="width:70%;">
                                    </div>                                              
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="clear"></div>
              </div>
           <div class="clear"></div>   
        </div>
    </body>
</html>